<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('添加描述和状态')}`">{{ $t('添加描述和状态') }}</t>
        </template>
        <sib-item v-model="value" :props="props1"></sib-item>
        <sib-item v-model="value" :props="props2"></sib-item>
        <sib-item v-model="value" :props="props3"></sib-item>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(false);
        const props1 = reactive({
            type: 'switch',
            activeText: '是',
            inactiveText: '否',
        });
        const props2 = reactive({
            type: 'switch',
            activeIcon: 'Check',
            inactiveIcon: 'Close',
        });
        const props3 = reactive({
            type: 'switch',
            loading: true,
            activeText: '是',
            inactiveText: '否',
        });

        return {
            props1,
            props2,
            props3,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props1"></sib-item>
    <sib-item v-model="value" :props="props2"></sib-item>
    <sib-item v-model="value" :props="props3"></sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(false);
        const props1 = reactive({
            type: 'switch',
            activeText: '是',
            inactiveText: '否',
        });
        const props2 = reactive({
            type: 'switch',
            activeIcon: 'Check',
            inactiveIcon: 'Close',
        });
        const props3 = reactive({
            type: 'switch',
            loading: true,
            activeText: '是',
            inactiveText: '否',
        });

        return { value, props1, props2, props3 };
    },
};
<\/script>`,
        };
    },
};
</script>
